<div class="mfa columns is-tablet is-centered">
  <div class="column is-half">
    <.form
      :let={f}
      for={@changeset}
      phx-change="validate"
      phx-submit="sign_in"
      class="box"
      as={:tokens}
    >
      <%= if @error do %>
        <div class="notification is-danger">
          Error: <%= @error %>
        </div>
      <% end %>

      <%= if @token == "" do %>
        <div class="field">
          <%= label(f, :access, gettext("Access Token"), class: "label") %>
          <div class="control has-icons-left">
            <%= text_input(f, :access,
              class: "input is-rounded",
              autocorrect: "off",
              autocapitalize: "none",
              spellcheck: "false",
              disabled: !!@task
            ) %>
            <span class="icon is-small is-left">
              <i class="mdi mdi-api"></i>
            </span>
          </div>
        </div>

        <div class="field">
          <%= label(f, :refresh, gettext("Refresh Token"), class: "label") %>
          <div class="control has-icons-left">
            <%= text_input(f, :refresh,
              class: "input is-rounded",
              autocorrect: "off",
              autocapitalize: "none",
              spellcheck: "false",
              disabled: !!@task
            ) %>
            <span class="icon is-small is-left">
              <i class="mdi mdi-cloud-refresh"></i>
            </span>
          </div>
        </div>
      <% else %>
        <p class="is-size-7 has-text-centered is-italic has-text-weight-light">
          <% provider_link =
            link(@provider,
              to: @provider,
              target: "_blank",
              rel: "noopener noreferrer"
            ) %>

          <%= raw(
            gettext(
              "You are using the API key (%{token}) provided by %{url}. It will allow your TeslaMate to access the official Tesla Fleet API and Tesla Telemetry streaming.",
              token: @token,
              url: safe_to_string(provider_link)
            )
          ) %>
        </p>
      <% end %>

      <div class="field mt-5">
        <div class="control">
          <%= submit(gettext("Sign in"),
            class: [
              "button",
              "is-rounded",
              "is-fullwidth",
              "is-link",
              if(!!@task, do: "is-loading")
            ],
            disabled:
              if @token == "" do
                !@changeset.valid?
              else
                false
              end,
            phx_disable_with: gettext("Saving...")
          ) %>
        </div>
      </div>

      <%= if @token == "" do %>
        <p class="is-size-7 has-text-centered is-italic has-text-weight-light">
          <% here_link =
            link(gettext("here"),
              to: "https://docs.teslamate.org/docs/faq#how-to-generate-your-own-tokens",
              target: "_blank",
              rel: "noopener noreferrer"
            ) %>

          <%= raw(
            gettext(
              "Obtaining tokens through the Tesla API requires programming experience or a 3rd-party service. Information can be found %{here}.",
              here: safe_to_string(here_link)
            )
          ) %>
        </p>
      <% end %>
    </.form>
  </div>
</div>
